我是個資訊科系的大學生,但是沒什麼電腦基礎,在大學的課程裡都是無腦跟著老師上課,要coding時就請GPT幫忙,但我覺得以後這樣不行,所以想藉由這次鐵人賽,鍛鍊自己的網頁Web能力。
這次30天我打算用基礎的HTML+CSS+JavaScripts
寫一個有關糖尿病的網頁,目前的方向是希望能寫出一個病人可以使用的自我監測網頁做為練習,家人也能透過此網頁確認患者的狀況,希望最後可以寫出一個基本功能都有的網頁。之後有機會更進階的話,希望能用到 react + typescript + vite + tailwind css
聽教授說這是一種滿新的技術,而且也好用。
目前的計畫是用GPT新推出的「study and learn」模式,從0開始學習,這個模式跟以往不一樣的是會針對你的提問解釋後,最下面會問問題,如果是計畫的話,會跟你確認想要的計畫是怎麼樣的;如果是針對知識提問,會先清楚的解釋,最後出幾個小問題給你回答,讓我們對於知識更有掌握度。
那接下來就進入正題吧!
首先是整體 Web ,如果以房子比喻的話,我們能這樣想像:
語言 | 功能 |
---|---|
HTML | 房子的骨架 |
CSS | 房子的裝潢 |
JavaScripts | 房子的功能 |
今天是第一天,我學習了基本的HTML,最基礎會用到的標籤有哪些,他們的作用是什麼。主要分成三個部分:結構元素、內容標籤、<head>
內常見元素。
下面的部分同時也當作我以後可以看的筆記。
<! DOCTYPE html>
<nav>
放置網站主要導覽連結 ( 會在隔天的進度出現)
<footer>
放置頁面的底部資訊,像是:版權宣告、聯絡資訊、網站小說明、社群連結
<html>
HTML頁面根元素
<head>
<title>
、編碼、CSS連結<body>
<hi>
、<p>
、<img>
、<ul>
<h1> ~ <h6>
<h1>
)<h2>
~ <h6>
,代表不同層級小標題<p>
<h1>
(標題類),但可以放<strong>
、<a>
( 內聯 )<strong>
<b>
差別是:<b>
只是單純粗體,但<strong>
會告訴瀏覽器這是重點<a href = 網址>
target = “_blank”
:在新分頁打開<img src = “ 網址” alt = “說明文字”>
alt
為代替文字→圖片不顯示時<ul>、<li>
<ol>、<li>
<title>
頁籤上顯示的標題文字
<meta charset = “UTF-8”>
<link rel = “stylesheet” href = “style = style.css”>
外部引入CSS樣式檔 ( 放<head>
裡 )
實作的部分,嘗試一個個打出來,先當作小練習,所以都只有最基礎的架構。